
<title>Buttons &amp; Icon - Ace Admin</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		Buttons &amp; Icon
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			Common Buttons &amp; Icons
		</small>
	</h1>
</div><!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter green">Application Buttons</h3>

				<!-- #section:elements.button.app -->
				<p></p>
				<a href="#" class="btn btn-default btn-app radius-4">
					<i class="ace-icon fa fa-cog bigger-230"></i>
					Default
					<span class="badge badge-pink">+3</span>
				</a>

				<a href="#" class="btn btn-app btn-primary no-radius">
					<i class="ace-icon fa fa-pencil-square-o bigger-230"></i>
					Edit
					<span class="badge badge-warning badge-left">11</span>
				</a>

				<a href="#" class="btn btn-app btn-success">
					<i class="ace-icon fa fa-refresh bigger-230"></i>
					Reload
				</a>

				<button class="btn btn-app btn-warning">
					<i class="ace-icon fa fa-undo bigger-230"></i>
					Undo
				</button>

				<a href="#" class="btn btn-app btn-info btn-sm no-radius">
					<i class="ace-icon fa fa-envelope bigger-200"></i>
					Mailbox
					<span class="label label-inverse arrowed-in">6+</span>
				</a>

				<button class="btn btn-app btn-danger btn-sm">
					<i class="ace-icon fa fa-trash-o bigger-200"></i>
					Delete
				</button>

				<button class="btn btn-app btn-purple btn-sm">
					<i class="ace-icon fa fa-cloud-upload bigger-200"></i>
					Upload
				</button>

				<button class="btn btn-app btn-pink btn-sm">
					<i class="ace-icon fa fa-share bigger-200"></i>
					Share
				</button>

				<button class="btn btn-app btn-inverse btn-xs">
					<i class="ace-icon fa fa-lock bigger-160"></i>
					Lock
				</button>

				<button class="btn btn-app btn-grey btn-xs radius-4">
					<i class="ace-icon fa fa-floppy-o bigger-160"></i>

					Save
					<span class="badge badge-transparent">
						<i class="light-red ace-icon fa fa-asterisk"></i>
					</span>
				</button>

				<button class="btn btn-app btn-light btn-xs">
					<i class="ace-icon fa fa-print bigger-160"></i>
					Print
				</button>

				<a href="#" class="btn btn-app btn-yellow btn-xs">
					<i class="ace-icon fa fa-shopping-cart bigger-160"></i>
					Shop
				</a>

				<div class="btn-group">
					<button class="btn btn-app btn-pink btn-xs">
						<i class="ace-icon fa fa-share bigger-175"></i>
						Share
					</button>

					<button data-toggle="dropdown" class="btn btn-app btn-pink btn-xs dropdown-toggle">
						<span class="bigger-110 ace-icon fa fa-caret-down icon-only"></span>
					</button>

					<ul class="dropdown-menu dropdown-pink">
						<li>
							<a href="#">Action</a>
						</li>

						<li>
							<a href="#">Another action</a>
						</li>

						<li>
							<a href="#">Something else here</a>
						</li>

						<li class="divider"></li>

						<li>
							<a href="#">Separated link</a>
						</li>
					</ul>
				</div><!-- /.btn-group -->
				

				<!-- /section:elements.button.app -->
			</div>
		</div>

		<div class="space"></div>

		<div class="row">
			<div class="col-sm-6" id="default-buttons">
				<h3 class="row header smaller lighter purple">
					<span class="col-sm-6"> Default Buttons </span><!-- /.col -->

					<span class="col-sm-6">
						<label class="pull-right inline">
							<small class="muted smaller-90">Border:</small>

							<input id="id-button-borders" checked="" type="checkbox" class="ace ace-switch ace-switch-5" />
							<span class="lbl middle"></span>
						</label>
					</span><!-- /.col -->
				</h3><!-- /.row -->

				<!-- #section:elements.button -->
				<p>
					<button class="btn">Default </button>
					<button class="btn btn-primary">Primary</button>
					<button class="btn btn-info">Info</button>
					<button class="btn btn-success">Success</button>
				</p>

				<p>
					<button class="btn btn-warning">Warning</button>
					<button class="btn btn-danger">Danger</button>
					<button class="btn btn-inverse">Inverse</button>
					<button class="btn btn-pink">Pink</button>
				</p>

				<p>
					<button class="btn btn-purple">Purple</button>
					<button class="btn btn-yellow">Yellow</button>
					<button class="btn btn-grey">Grey</button>
					<button class="btn btn-light">Light</button>
					<button class="btn btn-link">Link</button>
				</p>

				<!-- /section:elements.button -->

				<!-- #section:elements.button.white -->
				<p>
					<button type="button" class="btn btn-white">White</button>
					<button type="button" class="btn btn-white btn-default">Default</button>
					<button type="button" class="btn btn-white btn-primary">Primary</button>
					<button type="button" class="btn btn-white btn-info">Info</button>
					<button type="button" class="btn btn-white btn-success">Success</button>
					<button type="button" class="btn btn-white btn-warning">Warning</button>
				</p>

				<p>
					<button type="button" class="btn btn-white btn-danger btn-sm">Danger</button>
					<button type="button" class="btn btn-white btn-yellow btn-sm">Yellow</button>
					<button type="button" class="btn btn-white btn-pink btn-sm">Pink</button>
					<button type="button" class="btn btn-white btn-purple btn-sm">Purple</button>
					<button type="button" class="btn btn-white btn-inverse btn-sm">Inverse</button>
				</p>

				<!-- /section:elements.button.white -->
				<h3 class="header smaller lighter green">Button with Icons</h3>

				<p>
					<button class="btn btn-white btn-info btn-bold">
						<i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>
						Backup
					</button>

					<button class="btn btn-white btn-warning btn-bold">
						<i class="ace-icon fa fa-trash-o bigger-120 orange"></i>
						Delete
					</button>

					<button class="btn btn-white btn-default btn-round">
						<i class="ace-icon fa fa-times red2"></i>
						Cancel
					</button>
				</p>

				<div class="hr hr-dotted hr-16"></div>

				<p>
					<button class="btn">
						<i class="ace-icon fa fa-pencil align-top bigger-125"></i>
						Default
					</button>

					<button class="btn btn-primary">
						<i class="ace-icon fa fa-flask align-top bigger-125"></i>
						Primary
					</button>

					<button class="btn btn-info">
						Info
						<i class="ace-icon fa fa-print  align-top bigger-125 icon-on-right"></i>
					</button>
				</p>

				<p>
					<button class="btn btn-lg btn-success">
						<i class="ace-icon fa fa-check"></i>
						Success
					</button>

					<button class="btn btn-sm btn-warning">
						<i class="ace-icon fa fa-fire bigger-110"></i>
						<span class="bigger-110 no-text-shadow">Warning</span>
					</button>

					<button class="btn btn-xs btn-danger">
						<i class="ace-icon fa fa-bolt bigger-110"></i>

						Danger
						<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
					</button>
				</p>

				<p>
					<button class="btn btn-info">
						<i class="ace-icon fa fa-signal icon-only bigger-150"></i>
					</button>

					<button class="btn btn-warning btn-xs">
						<i class="ace-icon fa fa-wrench  bigger-110 icon-only"></i>
					</button>

					<button class="btn btn-danger btn-sm">
						<i class="ace-icon fa fa-reply icon-only"></i>
					</button>

					<button class="btn btn-grey btn-lg">
						<i class="ace-icon fa fa-trash-o fa-2x icon-only"></i>
					</button>
				</p>
			</div><!-- /.col -->

			<div class="col-sm-6">
				<h3 class="header smaller lighter red">Button Sizing</h3>

				<p>
					<button class="btn btn-minier btn-yellow">Minier</button>
					<button class="btn btn-xs">Mini</button>
					<button class="btn btn-sm btn-primary">Small</button>
					<button class="btn btn-info">Default</button>
					<button class="btn btn-lg btn-success">Large Size</button>
				</p>

				<p>
					<button class="btn btn-warning btn-xlg">Larger Size</button>
					<button class="btn btn-danger">Default</button>
					<button class="btn btn-sm btn-inverse">Small</button>
					<button class="btn btn-xs btn-pink">Pink</button>
					<button class="btn btn-minier btn-purple">Purple</button>
				</p>
				<h3 class="header smaller lighter grey">Disabled Buttons</h3>

				<p>
					<button class="btn disabled">Default </button>
					<button class="btn disabled btn-primary">Primary</button>
					<button class="btn disabled btn-info">Info</button>
					<button class="btn disabled btn-success">Success</button>
				</p>

				<hr />
				<p>
					<button class="btn btn-danger btn-block">Block Button</button>
				</p>
			</div><!-- /.col -->
		</div><!-- /.row -->

		<hr />
		<div class="row">
			<div class="col-sm-6">
				<h3 class="header smaller lighter blue">Button Groups</h3>

				<p></p>
				<div class="btn-group">
					<button type="button" class="btn">1</button>
					<button type="button" class="btn">2</button>
					<button type="button" class="btn">3</button>
				</div>
				

				<p></p>
				<div class="btn-group">
					<button type="button" class="btn btn-white btn-sm btn-primary">Left</button>
					<button type="button" class="btn btn-white btn-sm btn-primary">Middle</button>
					<button type="button" class="btn btn-white btn-sm btn-primary">Right</button>
				</div>
				

				<p></p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-light">1</button>
						<button class="btn btn-light">2</button>
						<button class="btn btn-light">3</button>
						<button class="btn btn-light">4</button>
					</div>

					<div class="btn-group btn-corner">
						<button class="btn">5</button>
						<button class="btn">6</button>
						<button class="btn">7</button>
					</div>

					<div class="btn-group">
						<button class="btn btn-grey">8</button>
					</div>
				</div>
				

				<p></p>
				<div class="btn-group btn-group-vertical">
					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-left"></i>
					</button>

					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-center"></i>
					</button>

					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-right"></i>
					</button>

					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-justify"></i>
					</button>
				</div>

				<div class="space-6"></div>
				

				<p>
					<button id="loading-btn" type="button" class="btn btn-success" data-loading-text="Loading...">Loading state</button>
					<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
					<button type="button" class="btn btn-sm btn-danger" data-toggle="button">Small</button>
					<button type="button" class="btn btn-xs btn-info" data-toggle="button">Mini</button>
				</p>

				<p></p>
				<div>
					<span>Checkbox: &nbsp;</span>

					<div data-toggle="buttons" class="btn-group">
						<label class="btn btn-sm">
							<input type="checkbox" value="1" />
							<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
						</label>

						<label class="btn btn-sm">
							<input type="checkbox" value="2" />
							<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
						</label>

						<label class="btn btn-sm">
							<input type="checkbox" value="3" />
							<i class="icon-only ace-icon fa fa-underline bigger-110"></i>
						</label>
					</div>
				</div>
				

				<p></p>
				<div>
					<span>Checkbox: &nbsp;</span>

					<!-- #section:elements.button.group -->
					<div data-toggle="buttons" class="btn-group btn-overlap btn-corner">
						<label class="btn btn-sm btn-white btn-info">
							<input type="checkbox" value="1" />
							<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
						</label>

						<label class="btn btn-sm btn-white btn-info">
							<input type="checkbox" value="2" />
							<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
						</label>

						<label class="btn btn-sm btn-white btn-info">
							<input type="checkbox" value="3" />
							<i class="icon-only ace-icon fa fa-underline bigger-110"></i>
						</label>
					</div>

					<!-- /section:elements.button.group -->
				</div>
				

				<p></p>
				<div>
					<span>Radio: &nbsp;</span>

					<div data-toggle="buttons" class="btn-group">
						<label class="btn btn-primary">
							<input type="radio" value="1" />
							<i class="icon-only ace-icon fa fa-align-left"></i>
						</label>

						<label class="btn btn-primary">
							<input type="radio" value="2" />
							<i class="icon-only ace-icon fa fa-align-center"></i>
						</label>

						<label class="btn btn-primary">
							<input type="radio" value="3" />
							<i class="icon-only ace-icon fa fa-align-right"></i>
						</label>
					</div>

					<label class="btn btn-primary" data-toggle="button">
						<i class="icon-only ace-icon fa fa-align-justify"></i>
					</label>
				</div>
				
			</div><!-- /.span -->

			<div class="col-sm-6">
				<h3 class="header smaller lighter green">Button Dropdown</h3>

				<p></p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" class="btn dropdown-toggle">
							Action
							<span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-default">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle">
							Action
							<i class="ace-icon fa fa-angle-down icon-on-right"></i>
						</button>

						<ul class="dropdown-menu">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown" class="btn btn-sm btn-danger dropdown-toggle">
							Danger
							<i class="ace-icon fa fa-angle-down icon-on-right"></i>
						</button>

						<ul class="dropdown-menu dropdown-danger">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->
				</div>

				<div class="space-4"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">
							Warning
							<span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-warning">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown" class="btn btn-success btn-lg dropdown-toggle">
							Success large
							<i class="ace-icon fa fa-angle-down icon-on-right"></i>
						</button>

						<ul class="dropdown-menu dropdown-success dropdown-menu-right">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->
				</div>

				<div class="space-4"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" class="btn btn-info btn-sm dropdown-toggle">
							Info small
							<span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-info dropdown-menu-right">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown" class="btn btn-inverse btn-xs dropdown-toggle">
							Inverse mini
							<span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-inverse">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->
				</div>

				<hr />
				

				<p></p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn">Action</button>

						<button data-toggle="dropdown" class="btn dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button class="btn btn-sm btn-yellow">Some Action</button>

						<button data-toggle="dropdown" class="btn btn-sm btn-yellow dropdown-toggle">
							<i class="ace-icon fa fa-angle-down icon-only"></i>
						</button>

						<ul class="dropdown-menu dropdown-yellow">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group dropup">
						<button class="btn btn-xs btn-danger">Danger</button>

						<button data-toggle="dropdown" class="btn btn-xs btn-danger dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-danger">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->
				</div>

				<div class="space-2"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-lg btn-warning">Warning</button>

						<button data-toggle="dropdown" class="btn btn-lg btn-warning dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only smaller-90"></span>
						</button>

						<ul class="dropdown-menu dropdown-warning">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button class="btn btn-success">Success</button>

						<button data-toggle="dropdown" class="btn btn-success dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-success">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->

					<div class="btn-group">
						<button class="btn btn-info btn-white">Info</button>

						<button data-toggle="dropdown" class="btn btn-info btn-white dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-info dropdown-menu-right">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->
				</div>

				<div class="space-2"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-inverse">Inverse</button>

						<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-inverse">
							<li>
								<a href="#">Action</a>
							</li>

							<li>
								<a href="#">Another action</a>
							</li>

							<li>
								<a href="#">Something else here</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">Separated link</a>
							</li>
						</ul>
					</div><!-- /.btn-group -->
				</div>
				
			</div><!-- /.span -->
		</div><!-- /.row -->

		<hr />
		<div class="row">
			<div class="col-sm-6">
				<h3 class="header smaller lighter green">Lables & Badges</h3>

				<!-- #section:elements.label -->
				<p>
					<span class="label">Default</span>
					<span class="label label-success arrowed">Success</span>

					<span class="label label-warning">
						<i class="ace-icon fa fa-exclamation-triangle bigger-120"></i>
						Warning
					</span>
					<span class="label label-danger arrowed-in">Danger</span>
					<span class="label label-info arrowed-in-right arrowed">Info</span>
					<span class="label label-inverse">Inverse</span>
				</p>

				<!-- /section:elements.label -->

				<!-- #section:elements.label-white -->
				<p>
					<span class="label label-white middle">Default</span>
					<span class="label label-success label-white middle">Success</span>

					<span class="label label-warning label-white middle">
						<i class="ace-icon fa fa-exclamation-triangle bigger-120"></i>
						Warning
					</span>
					<span class="label label-danger label-white middle">Danger</span>
					<span class="label label-info label-white middle">Info</span>
					<span class="label label-purple label-white middle">Inverse</span>
				</p>

				<!-- /section:elements.label-white -->

				<!-- #section:elements.badge -->
				<p>
					<span class="badge">1</span>
					<span class="badge badge-grey">1</span>
					<span class="badge badge-success">2</span>
					<span class="badge badge-warning">4</span>
					<span class="badge badge-danger">6</span>
					<span class="badge badge-info">8</span>
					<span class="badge badge-purple">3</span>
					<span class="badge badge-inverse">10</span>
					<span class="badge badge-pink">11</span>
					<span class="badge badge-yellow">2</span>
				</p>

				<!-- /section:elements.badge -->
				<p>
					<span class="label label-lg label-pink arrowed-right">Large</span>
					<span class="label label-lg label-yellow arrowed-in arrowed-in-right">Yellow</span>
					<span class="label label-lg label-purple arrowed">Purple</span>
				</p>

				<p>
					<span class="label label-xlg label-primary arrowed arrowed-right">Larger</span>
					<span class="label label-xlg label-grey arrowed-in-right arrowed-in">Grey</span>
					<span class="label label-xlg label-light arrowed-in-right">Light</span>
				</p>

				<p>
					<span class="label label-sm label-primary arrowed arrowed-right">Smaller</span>
				</p>
			</div><!-- /.span -->

			<div class="col-sm-6">
				<h3 class="header smaller lighter red">Pagination</h3>

				<div>
					<ul class="pagination">
						<li class="disabled">
							<a href="#">
								<i class="ace-icon fa fa-angle-double-left"></i>
							</a>
						</li>

						<li class="active">
							<a href="#">1</a>
						</li>

						<li>
							<a href="#">2</a>
						</li>

						<li>
							<a href="#">3</a>
						</li>

						<li>
							<a href="#">4</a>
						</li>

						<li>
							<a href="#">5</a>
						</li>

						<li>
							<a href="#">
								<i class="ace-icon fa fa-angle-double-right"></i>
							</a>
						</li>
					</ul>
				</div>

				<p></p>
				<ul class="pager">
					<li class="previous">
						<a href="#">&larr; Older</a>
					</li>

					<li class="next">
						<a href="#">Newer &rarr;</a>
					</li>
				</ul>
				
			</div><!-- /.span -->
		</div><!-- /.row -->

		<hr />
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter blue">
					369 Scalable FontAwesome Icons
					<small>
						<a href="http://fontawesome.io/icons/" target="_blank">
							(see all icons
							<i class="ace-icon fa fa-external-link"></i>)
						</a>
					</small>
				</h3>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon fa fa-adjust"></i>
						fa-adjust
					</li>

					<li>
						<i class="ace-icon fa fa-asterisk"></i>
						fa-asterisk
					</li>

					<li>
						<i class="ace-icon fa fa-ban"></i>
						fa-ban
					</li>

					<li>
						<i class="ace-icon fa fa-bar-chart-o"></i>
						fa-bar-chart-o
					</li>

					<li>
						<i class="ace-icon fa fa-barcode"></i>
						fa-barcode
					</li>

					<li>
						<i class="ace-icon fa fa-flask"></i>
						fa-flask
					</li>

					<li>
						<i class="ace-icon fa fa-beer"></i>
						fa-beer
					</li>

					<li>
						<i class="ace-icon fa fa-bell-o"></i>
						fa-bell-o
					</li>

					<li>
						<i class="ace-icon fa fa-bell"></i>
						fa-bell
					</li>

					<li>
						<i class="ace-icon fa fa-bolt"></i>
						fa-bolt
					</li>

					<li>
						<i class="ace-icon fa fa-book"></i>
						fa-book
					</li>

					<li>
						<i class="ace-icon fa fa-bookmark"></i>
						fa-bookmark
					</li>

					<li>
						<i class="ace-icon fa fa-bookmark-o"></i>
						fa-bookmark-o
					</li>

					<li>
						<i class="ace-icon fa fa-briefcase"></i>
						fa-briefcase
					</li>

					<li>
						<i class="ace-icon fa fa-bullhorn"></i>
						fa-bullhorn
					</li>

					<li>
						<i class="ace-icon fa fa-calendar"></i>
						fa-calendar
					</li>

					<li>
						<i class="ace-icon fa fa-camera"></i>
						fa-camera
					</li>

					<li>
						<i class="ace-icon fa fa-camera-retro"></i>
						fa-camera-retro
					</li>

					<li>
						<i class="ace-icon fa fa-certificate"></i>
						fa-certificate
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon fa fa-check-square-o"></i>
						fa-check-square-o
					</li>

					<li>
						<i class="ace-icon fa fa-square-o"></i>
						fa-square-o
					</li>

					<li>
						<i class="ace-icon fa fa-circle"></i>
						fa-circle
					</li>

					<li>
						<i class="ace-icon fa fa-circle-o"></i>
						fa-circle-o
					</li>

					<li>
						<i class="ace-icon fa fa-cloud"></i>
						fa-cloud
					</li>

					<li>
						<i class="ace-icon fa fa-cloud-download"></i>
						fa-cloud-download
					</li>

					<li>
						<i class="ace-icon fa fa-cloud-upload"></i>
						fa-cloud-upload
					</li>

					<li>
						<i class="ace-icon fa fa-coffee"></i>
						fa-coffee
					</li>

					<li>
						<i class="ace-icon fa fa-cog"></i>
						fa-cog
					</li>

					<li>
						<i class="ace-icon fa fa-cogs"></i>
						fa-cogs
					</li>

					<li>
						<i class="ace-icon fa fa-comment"></i>
						fa-comment
					</li>

					<li>
						<i class="ace-icon fa fa-comment-o"></i>
						fa-comment-o
					</li>

					<li>
						<i class="ace-icon fa fa-comments"></i>
						fa-comments
					</li>

					<li>
						<i class="ace-icon fa fa-comments-o"></i>
						fa-comments-o
					</li>

					<li>
						<i class="ace-icon fa fa-credit-card"></i>
						fa-credit-card
					</li>

					<li>
						<i class="ace-icon fa fa-tachometer"></i>
						fa-tachometer
					</li>

					<li>
						<i class="ace-icon fa fa-desktop"></i>
						fa-desktop
					</li>

					<li>
						<i class="ace-icon fa fa-arrow-circle-o-down"></i>
						fa-arrow-circle-o-down
					</li>

					<li>
						<i class="ace-icon fa fa-download"></i>
						fa-download
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon fa fa-pencil-square-o"></i>
						fa-pencil-square-o
					</li>

					<li>
						<i class="ace-icon fa fa-envelope"></i>
						fa-envelope
					</li>

					<li>
						<i class="ace-icon fa fa-envelope-o"></i>
						fa-envelope-o
					</li>

					<li>
						<i class="ace-icon fa fa-exchange"></i>
						fa-exchange
					</li>

					<li>
						<i class="ace-icon fa fa-exclamation-circle"></i>
						fa-exclamation-circle
					</li>

					<li>
						<i class="ace-icon fa fa-external-link"></i>
						fa-external-link
					</li>

					<li>
						<i class="ace-icon fa fa-eye-slash"></i>
						fa-eye-slash
					</li>

					<li>
						<i class="ace-icon fa fa-eye"></i>
						fa-eye
					</li>

					<li>
						<i class="ace-icon fa fa-video-camera"></i>
						fa-video-camera
					</li>

					<li>
						<i class="ace-icon fa fa-fighter-jet"></i>
						fa-fighter-jet
					</li>

					<li>
						<i class="ace-icon fa fa-film"></i>
						fa-film
					</li>

					<li>
						<i class="ace-icon fa fa-filter"></i>
						fa-filter
					</li>

					<li>
						<i class="ace-icon fa fa-fire"></i>
						fa-fire
					</li>

					<li>
						<i class="ace-icon fa fa-flag"></i>
						fa-flag
					</li>

					<li>
						<i class="ace-icon fa fa-folder"></i>
						fa-folder
					</li>

					<li>
						<i class="ace-icon fa fa-folder-open"></i>
						fa-folder-open
					</li>

					<li>
						<i class="ace-icon fa fa-folder-o"></i>
						fa-folder-o
					</li>

					<li>
						<i class="ace-icon fa fa-folder-open-o"></i>
						fa-folder-open-o
					</li>

					<li>
						<i class="ace-icon fa fa-cutlery"></i>
						fa-cutlery
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon fa fa-gift"></i>
						fa-gift
					</li>

					<li>
						<i class="ace-icon fa fa-glass"></i>
						fa-glass
					</li>

					<li>
						<i class="ace-icon fa fa-globe"></i>
						fa-globe
					</li>

					<li>
						<i class="ace-icon fa fa-users"></i>
						fa-users
					</li>

					<li>
						<i class="ace-icon fa fa-hdd-o"></i>
						fa-hdd-o
					</li>

					<li>
						<i class="ace-icon fa fa-headphones"></i>
						fa-headphones
					</li>

					<li>
						<i class="ace-icon fa fa-heart"></i>
						fa-heart
					</li>

					<li>
						<i class="ace-icon fa fa-heart-o"></i>
						fa-heart-o
					</li>

					<li>
						<i class="ace-icon fa fa-home"></i>
						fa-home
					</li>

					<li>
						<i class="ace-icon fa fa-inbox"></i>
						fa-inbox
					</li>

					<li>
						<i class="ace-icon fa fa-info-circle"></i>
						fa-info-circle
					</li>

					<li>
						<i class="ace-icon fa fa-key"></i>
						fa-key
					</li>

					<li>
						<i class="ace-icon fa fa-leaf"></i>
						fa-leaf
					</li>

					<li>
						<i class="ace-icon fa fa-laptop"></i>
						fa-laptop
					</li>

					<li>
						<i class="ace-icon fa fa-gavel"></i>
						fa-gavel
					</li>

					<li>
						<i class="ace-icon fa fa-lemon-o"></i>
						fa-lemon-o
					</li>

					<li>
						<i class="ace-icon fa fa-lightbulb-o"></i>
						fa-lightbulb-o
					</li>

					<li>
						<i class="ace-icon fa fa-lock"></i>
						fa-lock
					</li>

					<li>
						<i class="ace-icon fa fa-unlock"></i>
						fa-unlock
					</li>
				</ul>
			</div>
		</div>

		<hr />
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter blue">
					200 Scalable Glyphicons
					<small>
						<a href="http://getbootstrap.com/components/#glyphicons" target="_blank">
							(see all icons
							<i class="ace-icon fa fa-external-link"></i>)
						</a>
					</small>
				</h3>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon glyphicon glyphicon-asterisk"></i>
						glyphicon-asterisk
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-plus"></i>
						glyphicon-plus
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-euro"></i>
						glyphicon-euro
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-minus"></i>
						glyphicon-minus
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-cloud"></i>
						glyphicon-cloud
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-envelope"></i>
						glyphicon-envelope
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-pencil"></i>
						glyphicon-pencil
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-glass"></i>
						glyphicon-glass
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-music"></i>
						glyphicon-music
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-search"></i>
						glyphicon-search
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-heart"></i>
						glyphicon-heart
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-star"></i>
						glyphicon-star
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-star"></i>
						glyphicon-star-empty
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-user"></i>
						glyphicon-user
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-film"></i>
						glyphicon-film
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-th"></i>
						glyphicon-th-large
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-th"></i>
						glyphicon-th
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-th"></i>
						glyphicon-th-list
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-ok"></i>
						glyphicon-ok
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon glyphicon glyphicon-remove"></i>
						glyphicon-remove
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-zoom-in"></i>
						glyphicon-zoom-in
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-zoom-out"></i>
						glyphicon-zoom-out
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-off"></i>
						glyphicon-off
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-signal"></i>
						glyphicon-signal
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-cog"></i>
						glyphicon-cog
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-trash"></i>
						glyphicon-trash
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-home"></i>
						glyphicon-home
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-file"></i>
						glyphicon-file
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-time"></i>
						glyphicon-time
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-road"></i>
						glyphicon-road
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-download"></i>
						glyphicon-download-alt
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-download"></i>
						glyphicon-download
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-upload"></i>
						glyphicon-upload
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-inbox"></i>
						glyphicon-inbox
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-play"></i>
						glyphicon-play-circle
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-repeat"></i>
						glyphicon-repeat
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-refresh"></i>
						glyphicon-refresh
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-list"></i>
						glyphicon-list-alt
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon glyphicon glyphicon-lock"></i>
						glyphicon-lock
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-flag"></i>
						glyphicon-flag
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-headphones"></i>
						glyphicon-headphones
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-volume-off"></i>
						glyphicon-volume-off
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-volume-down"></i>
						glyphicon-volume-down
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-volume-up"></i>
						glyphicon-volume-up
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-qrcode"></i>
						glyphicon-qrcode
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-barcode"></i>
						glyphicon-barcode
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-tag"></i>
						glyphicon-tag
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-tags"></i>
						glyphicon-tags
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-book"></i>
						glyphicon-book
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-bookmark"></i>
						glyphicon-bookmark
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-print"></i>
						glyphicon-print
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-camera"></i>
						glyphicon-camera
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-font"></i>
						glyphicon-font
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-bold"></i>
						glyphicon-bold
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-italic"></i>
						glyphicon-italic
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-text-height"></i>
						glyphicon-text-height
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-text-width"></i>
						glyphicon-text-width
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li>
						<i class="ace-icon glyphicon glyphicon-align-left"></i>
						glyphicon-align-left
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-align-center"></i>
						glyphicon-align-center
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-align-right"></i>
						glyphicon-align-right
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-align-justify"></i>
						glyphicon-align-justify
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-list"></i>
						glyphicon-list
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-indent-left"></i>
						glyphicon-indent-left
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-indent-right"></i>
						glyphicon-indent-right
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-facetime-video"></i>
						glyphicon-facetime-video
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-picture"></i>
						glyphicon-picture
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-map-marker"></i>
						glyphicon-map-marker
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-adjust"></i>
						glyphicon-adjust
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-tint"></i>
						glyphicon-tint
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-edit"></i>
						glyphicon-edit
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-share"></i>
						glyphicon-share
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-check"></i>
						glyphicon-check
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-move"></i>
						glyphicon-move
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-step-backward"></i>
						glyphicon-step-backward
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-fast-backward"></i>
						glyphicon-fast-backward
					</li>

					<li>
						<i class="ace-icon glyphicon glyphicon-backward"></i>
						glyphicon-backward
					</li>
				</ul>
			</div>
		</div>

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null, null]
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	  //inline scripts related to this page
		 jQuery(function($) {
		$('#loading-btn').on(ace.click_event, function () {
			var btn = $(this);
			btn.button('loading')
			setTimeout(function () {
				btn.button('reset')
			}, 2000)
		});
	
		$('#id-button-borders').attr('checked' , 'checked').on('click', function(){
			$('#default-buttons .btn').toggleClass('no-border');
		});
	})
	});
</script>
